<template>
  <div class="browsingHistory">

    <span style="margin-left: 60px" v-if="Object.keys(dataObj).length !== 0">
      全部清空
       <el-divider direction="vertical"></el-divider>
       <el-tooltip class="item" effect="dark" content="最好不要清空唉~" placement="top-start">
      <i style="margin-left: 10px" class="el-icon-delete" @click="clearHistory"></i>
       </el-tooltip>
    </span>
    <div v-if="Object.keys(dataObj).length !== 0" style="width: 64%;margin-left: 200px">
      <el-timeline>
        <div v-for="(val,key,index) in dataObj" :key="index">
          <el-timeline-item :timestamp="key" placement="top">
            <div v-for="(item,idx) in val" :key="idx">
              <el-card>
                <el-divider content-position="left"><h3>{{ item.productName }}</h3></el-divider>
                <div class="ub">
                  <div style="height: 60px;width: 60px;margin-top: 10px;margin-left:60px">
                    <el-image fit="contain" :src="item.productPic"></el-image>
                  </div>
                  <h4 style="margin-left: 10px">
                    <span style="margin-left: 10px">品牌:
                      <span style="color: #6c8cd4">
                      {{ item.productBrandName }}
                    </span>
                    </span>
                    <el-divider direction="vertical"></el-divider>
                    <span style="margin-left: 10px">价格: <span
                        style="color: red">￥{{ Number(item.productPrice).toFixed(2) }}</span></span>
                  </h4>
                  <el-tooltip class="item" effect="dark" content="想要删除我吗~" placement="top-start">
                    <div style="position:absolute;left: 700px;margin-top: 20px" @click="removeHistory(item)">
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-tooltip>
                </div>
              </el-card>
            </div>
          </el-timeline-item>
        </div>
      </el-timeline>
      <div style="margin-left: 420px">
        <p v-if="showBottom">已经到底啦~</p>
        <el-link v-else type="primary" @click.prevent="loadMore">加载更多...</el-link>
      </div>
    </div>
    <el-empty v-else description="您还没去浏览呢 , 去看看~">
      <slot>
        <m-button text="去首页" @click="toHome()" classStyle="main-btn"></m-button>
      </slot>
    </el-empty>
  </div>
</template>

<script>
import productHistoryApi from '../../../api/productHistory'
import { reactive, onMounted, toRefs } from 'vue'
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import MButton from '../../../components/MButton.vue'

export default {
  name: 'browsingHistory',
  components: { MButton },
  setup () {
    const state = reactive({
      // 当前页
      current: 1,
      // 每页显示数量
      size: 6,
      // 列表对象
      dataObj: {},
      // 是否展示禁止加载
      showBottom: false,
    })
    const router = useRouter()
    //-------------------method start
    // 分页列举出浏览历史
    const listProductHistory = () => {
      productHistoryApi.list(state.current, state.size).then(res => {
        const dataMap = res.data
        const keys = Object.keys(dataMap)
        if (dataMap && keys && keys[0]) {
          keys.forEach(key => {
            const dataArr = state.dataObj[key]
            if (dataArr && dataArr[0]) {
              dataArr.push(...dataMap[key])
              state.dataObj[key] = dataArr
            } else {
              state.dataObj[key] = dataMap[key]
            }
          })
        } else {
          state.showBottom = true
        }
        console.log(state.dataObj)
      })
    }
    // 删除历史记录
    const removeHistory = (item) => {
      ElMessageBox.confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        productHistoryApi.remove(item.id).then(res => {
          ElMessage.success('删除成功')
          // 为了避免缓存
          let NewPage = '_empty' + '?time=' + new Date().getTime() / 500
          router.push(NewPage)
          router.go(-1)
          listProductHistory()
        })
      }).catch(() => {
      })
    }
    // 清空历史
    const clearHistory = () => {
      ElMessageBox.confirm('确定要清空吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        productHistoryApi.clearHistory().then(res => {
          ElMessage.success('清空成功')
          // 为了避免缓存
          let NewPage = '_empty' + '?time=' + new Date().getTime() / 500
          router.push(NewPage)
          router.go(-1)
          listProductHistory()
        })
      }).catch(() => {
      })

    }
    // 去首页
    const toHome = () => {
      router.push('/home')
    }
    // 加载更多
    const loadMore = () => {
      if (!state.showBottom) {
        state.current++
        listProductHistory()
      }
    }
    //-------------------method end

    // 钩子
    onMounted(() => {
      listProductHistory()
    })
    return {
      removeHistory,
      clearHistory,
      toHome,
      loadMore,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped lang="scss">
.el-icon-delete:hover {
  color: red;
}
</style>
